@charset "utf-8";
@import url('font.css');
@import url('reset.css');

html{
	font-size: 1px;
}

body{

	width: 100%;
	background-color: lemonYellow;
}


/*   HEADER  */
.site-header-wrapper{
	display: flex;
	align-items: center;

	width: 1196rem;
	height: 90rem;
	margin:auto;
	
	}

		.logo img{
			width: 85rem;
			height: 100%;
			
		}

	.nav{
		margin-left: 101rem;
		margin-bottom: 20rem; 
		}

		.nav-item{
			display: inline-block;
			padding-top: 40rem;
			padding-right: 30rem;
			font-family: poppins, sans-serif;
			font-weight: 600;
			font-size: 14px;
			color: black;
			text-decoration: none;

			}

		.icons-nav{
			display: flex;
			justify-content: space-between;

			width: 130rem;
			margin-left: 350rem;
		}

		.icons-nav-item img{
			width: 62rem;
			height: 100%;
		}


	
/*   SLIDE  */
.site-slide-show{

	    position: relative;
        z-index: 1;
        width: 100%;
        height: 740rem;
        padding-top: 84rem;
	
		}

		.slide-show-first{
			position: relative;
			z-index: 1;
			width: 100%;
			height: 660rem;
		}





		.site-slide-content{
			display: flex;
			position: relative;
			z-index: 3;
			width: 1196rem;
			height:565rem;
			margin: auto;
			

		}

			.image-site-slide{
				width: 490rem;
				min-height: 565rem;
			}

			.slide-article-content{
				    width: 489rem;
				    display: flex;
				    padding-top: 186rem;
				}

			


			.site-slide-article{
				margin-left: 16rem;
				width: 287rem;
				min-height: 360rem;
			}

				.site-slide-article-titre{
					width: 287rem;
					

				}
				.site-slide-article h4{
					margin-bottom: 10rem;
				}

				.site-slide-article h1{
					margin-bottom: 58rem;
				}

			.site-slide-date{
				display: flex;
				margin-left: 16rem;
				margin-bottom: 20rem;
				width: 156rem;
				min-height: 360rem;
				
			}

				.date-jour{
					position: relative;
					display: flex;
					flex-direction: column;
					width: 85rem;
					height: 153rem;
					padding: 15rem 25rem;
					background-color: black;
				}

				.date-jour p{
					font-family: poppins, sans-serif;
					font-weight: 700;
					font-size: 37rem;
					color: white;

				}
					.date-1{
						margin-bottom: 45rem;
					}

					.date-1::after{
						position: absolute;
	   				    top: 60rem;
	    				left: 28rem;
	    				font-size: 23rem;
						font-family: 'icomoon';
						color: white;
						content: "\e902";
					}



				.date-mois{
					font-family: poppins, sans-serif;
					font-weight: 500;
					font-size: 28rem;
					color: black;

					margin-left: 16rem;
				}


	.site-slide-bg{
		position: absolute;
		z-index: 1;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 405rem;

		background-color: #FFE02A;
		}
		.site-slide-bg.skin2{
			background-color: #ce284b;
		}

		.site-slide-bg.skin3{
			background-color: #019BA4;
		}

/*   AGENDA  */

.site-agenda{
	position: relative;
	z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-end;

	width: 100%;
	height: 260rem;
	padding-top: 50rem;
	background-color: #F0F0F0;
	}

	.img-saison{
		width: 142rem;
		height: 145rem;
	}

	.img-date{
		width: 142rem;
		height: 145rem;
	}
		.img-date img{
			width: 80rem;
    		margin-left: 62rem;
		}

	.agenda-bloc{
			margin: auto;
			width: 792rem;
			height: 187rem;

	}

		.agenda-content{
			position: relative;
			display: flex;
			justify-content: space-between;

			margin: auto;

			width: 792rem;
			height: 152rem;

		}

			.agenda-item{
				width: 85rem;
				height: 152rem;

				list-style: none;

				background-color: white;
				 }


				.agenda-date-content{
					display: flex;
					flex-direction: column;
					margin: 20rem auto;
					text-align: center;
					width: 64rem;
					height: 106rem;
				}


				.agenda-item.active{
					background-color: black;

				}

				.agenda-date-content.active{
					color: white;
					transform: scale(1.1);
				}

		.agenda-content-icon{
			display: flex;
			justify-content: space-between;
			margin: auto;
			overflow: hidden;

			width: 792rem;
			height: 35rem;
		}

			.agenda-icon{
				width: 85rem;
				height: 206rem;


				background-color: black;
			}





	.lien-article-presentation::after {
		content: '';
		display: block;
		width: 0%;
		border-bottom: 1.5rem solid white;
		transition: width 0.3s;
		}

		.lien-article-presentation:hover::after {
		width: 100%;
		}

		/*   AGENDA HOVER    */

		.submenu-agenda {
			position: relative;
			z-index: 0;
			width: 100%;
			text-align: left;

			opacity: 0;
			transform: translateY(-100%);
	        transition: all 0.3s;
			}

			.submenu-agenda.active{
          
	          opacity: 1;
	          transform: translate(0%);

	        }

				.submenu-content{
					display: flex;
					margin: auto;
					width: 994rem;
					height: 97rem;
					
				}

				.submenu-content.skin2{
					border-top: 2px solid grey;
					border-bottom: 2px solid grey;
				}
					.submenu-text{
						display: flex;
						align-items: center;
						width: 620rem;
						height: 97rem;

					}

			.submenu-agenda-content{
					position: relative;
					z-index: 3;
					margin: auto;
					width: 994rem;
					height: 291rem;
				}

					.tag-agenda{

						width: 85rem;
						height: 33rem;

						padding: 8rem 16rem;
						border:2px solid grey;
						border-radius: 20px;

						 font-family: poppins, sans-serif;
					     font-weight: 600;
					     font-size: 12px; 
					     text-transform: uppercase;
					     color: white
					   

					}

						.tag-agenda.skin2{
							width: 72rem;
							margin:0rem 21rem 0rem 0rem;
						}

					.heure-agenda{
						margin:0rem 32rem 0rem 16rem;
						width: 69rem;
						height: 23rem;

						font-family: poppins, sans-serif;
					    font-weight: 500;
					    font-size: 28px; 
					    color: white;

				
						}

					.nom-agenda{
						margin-right: 28rem;
						font-family: poppins, sans-serif;
					    font-weight: 500;
					    font-size: 18px; 
					    text-transform: uppercase;
					    color: white;

					    height: 20rem;

				

						}

					.artiste-agenda{
						height: 18rem;
						font-family: poppins, sans-serif;
					    font-weight: 300;
					    font-size: 14px; 

					    color: white;

					}

					.lien-article-presentation.lien-agenda{
						margin: 0rem 101rem 0rem 0
						color:white;
					}


				.submenu-lien{
						display: flex;
						justify-content: center;		
						align-items: center;


						width: 85rem;
						height: 97rem;
						margin: 0rem 0rem 0rem 188rem;
						
				}

				.submenu-btn{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 85rem;
						height: 97rem;
						margin: 0rem 0rem 0rem 16rem;
					
				}

					.icons-submenu-item img{
						width: 60rem;
						height: auto;

					}


				.submenu-agenda-bg{
					position: absolute;
					z-index: 0;
					top: 0;
					left: 0;
					width: 100%;
					height:291rem;
					background-color: black;
				}


			

			
/*   PRESENTATION  */

.site-presentation{
	width: 100%;
	

	}

	.site-presentation-allcontent{
		width: 1440rem;
	
		margin: auto;
		}

	.site-presentation-item{
		position: relative;
		z-index: 1;
		display:flex;
		justify-content: flex-end;
		position: relative; 
		width: 100%;
		height: 390rem;

		margin-bottom: 250rem;
		}

		.site-presentation-item:nth-child(2){
			justify-content: flex-start;
		}

		.site-presentation-img{
			width: 813rem;
			height: 391rem;

			
		}

		.site-presentation-content{
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			position: absolute;
			top: 52rem;
			left: 223rem;

			width: 489rem;
			min-height: 287rem;

			color: white;
			}

			.site-presentation-content p{	
				font-family: poppins, sans-serif;
				font-weight: 300;
				font-size: 16rem;

				line-height: 21rem;	
				color: white;
				
			}

			.site-presentation-content.color1{
				padding: 21rem 75rem 21rem 25rem;
				background-color: #019BA4;
			}

			.site-presentation-content.color2{
				padding: 21rem 29rem 21rem 25rem;

				top: 36rem;
				left: 728rem;
				background-color: #EDAA2B;
			}

			.site-presentation-content.color3{
				padding: 20rem 22rem 19.5rem 23rem;
				background-color: #A82771;
			}

			.site-presentation-item.skin1{
				 margin-bottom: 100rem;
			}

/*   ABONNEMENT  */

.site-abonnement{
	position: relative;
	
	width: 100%;
	height: 360rem;

	}

	.abonnement-content{
		position: relative;
		z-index: 5;
		width: 100%;
		height: 325rem;
		
	}

		.abonnement-content h1{
			margin: auto;
			width: 450rem;
			height: 149rem;
		}

		.abonnement-content p{
			margin: auto;
			text-align: center;

			width: 792rem;
			height: 55rem;

			font-family: poppins, sans-serif;
			font-weight: 400;
			font-size: 16rem;
			line-height: 21rem;	
		}

		.button-centre{
		    width: 219rem;
		    margin: 30rem auto;
		}

	.abonnement-bg{
		position: absolute;
		top: 40rem;
		left: 0rem;
		z-index: 1;
		width: 100%;
		height: 320rem;
		background-color: #FFE02A;
	}

/*   ARTISTE   */
.slide-artist{
	padding-top: 271rem;
	width: 100%;
	height: 658rem;

	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: 50% 50%;
	background-image: url("..//image/portrait-2.jpg");
    
 }

 .slide-show{
 	width: 100%;
 	height: 658rem;
 }



	.slide-artist-content{
		margin: auto;
		padding-bottom: 40rem;
		width: 1196rem;
		height: 400rem;

		color: white;
	}

	.slide-artist-text{
		margin: 0rem 0rem 0rem 120rem;
		width: 400rem;
		height: 100%;

		color: white;
		
	}

		.slide-artist-text h1{
			margin-top: 22rem;
		}

		.slide-artist-text p{
			margin-top: 33rem;
			font-family: poppins, sans-serif;
			font-weight: 300;
			font-size: 14rem;
			line-height: 21rem;	
		}

		.btn-black-border.article{
			margin-top: 31rem;
			color: white;
			border: 3px solid white;
		}


/*   SITE ACTU  */
.site-actu{
	display: block;
	width: 1196rem;
	height: 800rem;
	margin: auto;
	padding: 100rem 0rem;
	
	}
	.site-actu-titre{
		width: 388rem;
		height: 113rem;
		margin-bottom: 80rem;
		
		}
	.actu-content{
		display: flex;
		justify-content: space-between;

		width: 100%;
	}

	.article-content{
		width: 388rem;
		height: 370rem;
		
	}

	.article-img{
		position: relative;
		width: 388rem;
		height: 244rem;
	}
		.tag-article{
			position: absolute;
			bottom: 0rem;
			right: 0rem; 
			padding: 9rem 29rem 9rem 29rem; 
			width: 140rem;
			height: 31rem;
			background-color: black;
		}

			.tag-article p{
				text-align: center;
				font-family: poppins, sans-serif;
				font-weight: 400;
				font-size: 16rem;
				text-transform: uppercase;
				color: white;
			}


	.actu-text-content h2{
		margin-top: 10rem;
		font-family: poppins, sans-serif;
		font-weight: 700;
		font-size: 40rem;
		text-transform: uppercase;
	}

	.actu-text-content h3{
		margin-top: 10rem;
		margin-bottom: 15rem;
		font-family: poppins, sans-serif;
		font-weight: 400;
		font-size: 20rem;
		text-transform: uppercase;
	}

	.lien-article-presentation-actu{

		font-family: poppins, sans-serif;
		font-weight: 400;
		font-size: 12rem;
		color: black;
		text-decoration: none;

		}

/*   NEWSLETTERS  */

.site-news-letter{
	position: relative;
	width: 100%;
	height: 312rem;


	}
	.site-news-letter-content{
		position: relative;
		z-index: 5;
		padding-top: 12rem;
		width: 1196rem;
		height: 100%;
		margin:auto;
		
	}

		.site-news-letter-content p{
			text-align: center;
			margin: 0rem auto 40rem auto;
			width: 792rem;
			min-height: 55rem;

			font-family: poppins, sans-serif;
			font-weight: 400;
			font-size: 16rem;
		}

		.site-news-letter-titre{
			width: 388rem;
			height: 85rem;
			margin-bottom: 30rem;
		}

		.form-newsletter{
			width: 590rem;
			height: 50rem;
			margin: 20rem auto;
		}


		.form-newsletter-field {
		    width: 518rem;
		    height: 50rem;
		    padding: 0 15rem;
		    border: 1px solid white;
		    letter-spacing: 0.1em;
	   	 }

	   	 .form-newsletter-submit {
		    position: relative;
		    left: -5rem;
		    width: 70rem;
		    height: 50rem;
		    background: #000000 url(../image/mail.svg) center center no-repeat;
		    background-size: 30rem auto;
		    border: none;
		    text-indent: -999rem;
		    cursor: pointer;
		    transition: all 0.1s;
		}

	.site-news-letter-bg{
		position: absolute;
		z-index: 1;
		top: 44rem;
		left: 0rem;
		z-index: 1;
		width: 100%;
		height: 270rem;
		background-color: #019BA4;
		}

/*  FOOTER  */

.site-footer{
	width: 100%;
	height: 249rem;
	background-color: rgb(20,20,20);
	padding-top: 21rem;
	}

	.site-footer-content-nav{
		margin: 0rem auto 25rem auto;
		padding-top: 5rem;
		width: 590rem;
		height: 35rem;
	}

	.site-nav-footer-item{
		display: flex;
		justify-content: space-between;
	}
		.site-nav-footer-item a{
		font-family: poppins, sans-serif;
		font-weight: 600;
		font-size: 12rem;
		color: white;
		text-decoration: none;
		}

	.site-footer-content-social{
		display: flex;
		width: 276rem;
		height: 86rem;
		margin: auto;

	}
		.site-footer-nav-social{
			margin-left: 20rem;
		}

		.site-footer-logo img{
			width: 80rem;
			height: auto;
		}

		.site-icon-footer{
			display: flex;
		}
		.sharers-item {
			width: 45rem;
			height: 45rem;
			margin: 10rem 5rem 0rem 0rem; 
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 100%;
			text-indent: -999rem;
			cursor: pointer;
			transition: all 0.1s;
		}

		.sharers-item.is-twitter {
			background-image: url("../image/twiter.svg");
		}

		.sharers-item.is-facebook {
			background-image: url("../image/facebook.svg");
		}

		.sharers-item.is-instagram {
			background-image: url("../image/insta.svg");
		}

	.site-mentions-legales{
		display: block;
		margin: 20rem auto 0rem auto;
		text-align: center;
		font-family: poppins, sans-serif;
		font-weight: 300;
		font-size: 12rem;
		color: white;
		opacity: 0.7;
		text-decoration: none;
	}


/* TEXTE */

h4{
	font-family: poppins, sans-serif;
	font-weight: 500;
	font-size: 20rem;
}

h1{
	font-family: poppins, sans-serif;
	font-weight: 700;
	font-size: 60rem;
	text-transform: uppercase;
}

h5{
	font-family: poppins, sans-serif;
	font-weight: 600;
	font-size: 14rem;
	text-transform: uppercase;
	color: white;

}

.agenda-mini{
	font-family: poppins, sans-serif;
	font-weight: 500;
	font-size: 20rem;
	text-transform: uppercase;
}

	.agenda-nb{
		font-family: poppins, sans-serif;
		font-weight: 700;
		font-size: 50rem;
		text-transform: uppercase;

		text-align: center;
		min-width: 60rem;
		min-height: 41rem;
	}




/* BOUTON */

.btn-reserver{
  position: relative;

  display: inline-block;
  margin-right: 50px;
  margin-bottom: 13rem;

  border: 3px solid black; 
  color: black; 
  padding: 15px 30rem;

  font-family: poppins, sans-serif;
  font-weight: 500;
  font-size: 16px; 
  text-decoration: none;
  text-transform: uppercase;
  
}

.reserver-txt{
	position: relative;
	z-index: 2;
}

.reservation-hover{
	position: absolute;
	z-index: 1; 
	top: 0px;
	left: 0px;

	width: 0px;
	height: 100%;
	background-color: black;

	transition: all 0.3s;
}

.btn-reserver i{
		margin-left: 20rem;
		font-size: 15rem;
	}

	.btn-reserver:hover .reserver-txt{
		color: white;
	}

	.btn-reserver:hover .reservation-hover{
		width: 100%;
		background-color: black;
	}

.btn-live{
  position: relative;
  display: inline-block;
  background-color: black;
  border:none;
  color: white; 
  padding: 15rem 30rem;

  font-family: poppins, sans-serif;
  font-weight: 500;
  font-size: 16px; 
  text-transform: uppercase;
  text-decoration: none;
  
}

	.live-txt{
		position: relative;
		z-index: 2;
	}

	.live-hover{
		position: absolute;
		z-index: 1; 
		top: 0px;
		left: 0px;

		width: 0px;
		height: 100%;
		background-color: black;

		transition: all 0.3s;
	}

		.btn-live i{
				margin-left: 20rem;
				font-size: 15rem;
			}


		.btn-live:hover .live-txt{
			color: black;
		}

		.btn-live:hover .live-hover{
			width: 100%;
			background-color: white;
		}

.lien-article-presentation{
	font-family: poppins, sans-serif;
	font-weight: 300;
	font-size: 12rem;
	color: white;
	text-decoration: none;

}

/* BOUTON NOIR */
.btn-black-border{
    	position: relative;

	  display: inline-block;
	  border: 3px solid black; 
	  color: black; 
	  padding: 16px 60rem;

	  font-family: poppins, sans-serif;
	  font-weight: 500;
	  font-size: 16px; 
	  text-transform: uppercase;
	  text-decoration: none;

	  transition: all 0.3s;
}

	.btn-black-border-txt{
		position: relative;
		z-index: 2;
	}

	.btn-black-border-hover {
		position: absolute;
		z-index: 1; 
		top: 0px;
		left: 0px;

		width: 0px;
		height: 100%;
		background-color: black;

		transition: all 0.3s;
	}

			.btn-black-border:hover .btn-black-border-txt{
				color: white;
			}

			.btn-black-border:hover .btn-black-border-hover{
				width: 100%;
				background-color: black;		
			}



/* BOUTON BLANC */
.btn-white-border-txt{
		position: relative;
		z-index: 2;
	}

	.btn-white-border-hover {
		position: absolute;
		z-index: 1; 
		top: 0px;
		left: 0px;

		width: 0px;
		height: 100%;
		background-color: white;

		transition: all 0.3s;
	}

			.btn-black-border:hover .btn-white-border-txt{
				color: black;
			}

			.btn-black-border:hover .btn-white-border-hover{
				width: 100%;
				background-color: white;		
			}
/* ANIMATION */

	/*header*/
	.nav-item::after {
		content: '';
		display: block;
		width: 0%;
		border-bottom: 2rem solid black;
		transition: width 0.3s;
	}

		.nav-item:hover::after {
		width: 100%;
		}


	.lien-article-presentation::after {
		content: '';
		display: block;
		width: 0%;
		border-bottom: 1.5rem solid white;
		transition: width 0.3s;
		}

		.lien-article-presentation:hover::after {
		width: 100%;
		}


	.lien-article-presentation-actu::after{
		content: '';
		display: block;
		width: 0%;
		border-bottom: 1.5rem solid black;
		transition: width 0.3s;
		}		

		.lien-article-presentation-actu:hover::after {
		width: 18%;
		}



	.lien-footer::after {
		content: '';
		display: block;
		width: 0%;
		border-bottom: 2rem solid white;
		transition: width 0.3s;
		}

		.lien-footer:hover::after {
		width: 100%;
		}